<script setup>
// 导入ref函数从vue的文件中
// 导入reactive函数从vue的文件中
import {ref, reactive} from 'vue'
// 定义一个响应式对象
const count = ref(0)

console.log(count) // { value: 0 }
// 如果在js脚本中想要改变响应式数据 需要调用.value属性进行修改
console.log(count.value) // 0
// 修改响应式数据
count.value++

let increment = function () {
  // 在 JavaScript 中需要 .value
  count.value++
}

// 定义一个响应式的对象
const obj = ref({
  nested: {count: 0},
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 深层次响应式
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

// 定义一个reactive响应式对象
// reactive响应式函数有局限性
// 1.参数必须是对象 map 集合等
// 2.响应式对象一旦创建不要重新引用新响应式对象
// 3.不能通过解构实现属性的调用
const state = reactive({count1: 0})
// 在使用的时候不需要调用.value属性
// state.count1++;

let {count1} = state;
count1++;
console.log(state)

let count2 = ref({count3: 0})
count2.value.count3++

let {count3} = count2;
count3++;

console.log(count2)

</script>

<template>
  <!--在页面中使用响应式对象-->
  <!--  在html使用响应式数据不需要调用.value属性-->
  <div>{{ count }}</div>

  <!--  通过事件绑定来修改响应数据的值-->
  <button @click="count++">
    {{ count }}
  </button>
  <!--绑定事件修改响应式-->
  <button @click="increment">
    {{ count }}
  </button>
  <!--  深层次响应-->
  <button @click="mutateDeeply">
    {{ obj.nested.count }}
  </button>

  <div>{{ obj.arr }}</div>

  <!--  使用reactive-->
  <!--  reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的-->
  <button @click="state.count1++">
    {{ state.count1 }}
  </button>

</template>


<style scoped>

</style>
